<template>
    <div class="main">
        <section>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="大区ID" prop="regionUserId" min-width="100"></el-table-column>
                <el-table-column align="center" label="大区昵称" prop="regionNickname" min-width="100"></el-table-column>
                <el-table-column align="center" label="隶属用户ID" prop="citypartnerId" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="隶属用户昵称" prop="nickname" min-width="100"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>

    </div>
</template>

<script>
    export default {
        name: 'memberList',
        props: {
            id: { default: '' }
        },
        data() {
            return {
                listLoading: false,
                listQuery: {
                    citypartnerId: this.id,
                    pageIndex: 1,
                    pageSize: 20,
                    isPage: 1
                },
                list: [],
                listTotal: 0,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/userRegion/detail',
                    method: 'post',
                    data: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            }
        }
    }
</script>
